<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>陈叶鑫</title>
    <link rel="stylesheet" href="css/font_2470572_edyg9d9i46v.css">
    <link rel="stylesheet" href="css/font_2470572_ap2uzzdt7z7.css">
    <style>    
    * {
        margin: 0;
        padding: 0;
    }
    .nav{
        width: 90%;
        height: 197.56px;
        margin: 0 auto;
        border-radius: 8px;
        overflow: hidden;
    }
    .nav .hang{
        width: 100%;
        height: 66.19px;
        display: flex;
    }
    .hang .lie{
        flex: 23%;
        line-height: 65.19px;
        border-right: 1px solid #fff;
        box-sizing: border-box;
    }
    .nav .lie:last-child{
        border: none;
    }
    .hang .lie:nth-child(1){
        flex:  31%;
    }
    .nav .a{
        background: linear-gradient(to right,#fa5956,#fb8650 54%);
    }
    .nav .a .lie:first-child{
        background: url("./img/背景1.png") no-repeat right bottom;
        background-size: 73px auto;
        border-top-left-radius: 8px;
    }
    .nav .a .lie:nth-child(2){
        background: url("./img/背景2.png") no-repeat left bottom;
        background-size: 37px auto;
        border-top-left-radius: 8px;
    }
    .nav .a .lie:last-child a{
        background: url("./img/背景7.png") no-repeat left bottom;
        background-size: 100% auto;
        text-align: center;
        position: relative;
        width: 100%;
        color: #a05416;
        display: block;
    }
    .nav .b .lie:first-child{
        background: url("./img/背景3.png") no-repeat right bottom;
        background-size: 73px auto;
        border-top-left-radius: 8px;
    }
    .nav .b .lie:nth-child(2){
        background: url("./img/背景4.png") no-repeat left bottom;
        background-size: 37px auto;
        border-top-left-radius: 8px;
    }
    .nav .c .lie:first-child{
        background: url("./img/背景5.png") no-repeat right bottom;
        background-size: 73px auto;
        border-top-left-radius: 8px;
    }
    .nav .c .lie:nth-child(2){
        background: url("./img/背景6.png") no-repeat left bottom;
        background-size: 37px auto;
        border-top-left-radius: 8px;
    }
    .nav .b{
        background: linear-gradient(to right,#4b8fed,#53bced);
    }
    .nav .c{
        background: linear-gradient(to right,#34c2aa,#6cd557);
    }
    .nav a{
        color: #fff;
        text-decoration: none;
    }
    .nav .a .lie:last-child{
        flex: 46%;
        background: linear-gradient(to right,#ffbc49,#ffd252);
    }
    .b{
        margin: 1px 0;
    }
    .nav2{
        width: 90%;
        height: 110.06px;
        margin: 10px auto;
        display: flex;
        background-color: #fff;
        flex-wrap: wrap;
    }
    .nav2 li{
        flex: 20%;
        display: flex;
        justify-content: center;
    }
    .nav2 li a{
        text-decoration: none;
        color: #222;
        font-size: 12px;
    }
    .subnav-icon{
        width: 28px;
        height: 28px;
        background-repeat: no-repeat;
        display: block;
        background-image: url("./img/xiaotup.png");
        background-size: 28px;
        margin: 0 auto;
    }
    .wei {
     margin: 70px auto;
    width: 100%;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    }
    .wei,.wei ul li a{
        font-size: 8px;
        color: silver;
    }
    .wei ul:nth-child(1){
        flex: 100%;
        height: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wei ul:nth-child(1) li:nth-child(1),.dibuzushi ul:nth-child(1) li:nth-child(2){
        border-right: 1px solid silver;
        padding: 0 5px;
        margin: 0 5px;
    }
    .wei ul:nth-child(1) li:nth-child(3){
        border: none;
        padding: 0 5px;
        margin: 0 5px;
    }
    .wei ul:nth-child(2){
        flex: 100%;
        height: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wei ul:nth-child(2) li:nth-child(1){
        border-right: 1px solid silver;
        padding: 0 5px;
        margin: 0 5px;
    }
    .dibuer{
    width: 96%;
    height:60px;
    margin: 15px auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-items: center;
    border-top: 1px solid slategray ;
    }
    .dibuer li{
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        flex:33%;
        height: 100%;
    }
    .dibuer li div{
        width: 20px;
        height: 20px;
        margin: 0 auto;
    }
    .dibuer li span{
        flex: 100%;
        display: flex;
        font-size: 13px;
        justify-content: center;
    }
    .shousuolan{
        width: 96%;
        height: 44px;
        box-sizing: border-box;
    }
    .sosuo ul{
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    .so li:nth-child(1){
        flex:1;
        height: 28px;
        background-color: #fff;
        border-radius: 15px;
        border: 1px solid rgb(97, 54, 54);
        padding-left: 10px;
        align-items: center;
    }
    .so li:nth-child(2){
        width:41px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-left: 12px;
        flex-direction: column;
        font-size: 12px;
    }
    .so li input {
        width: 80%;
        height: 100%;
        border: none;
        outline:none;
        padding-left: 12px;
        color: rosybrown;
     
    }
    .dingbu {
        width: 100%;
        height: 260px;
        margin: 0 auto;
        padding: 20px 8px 0px 22px;
        background-image: url(./img/顶部背景图.jpg);
        box-sizing: border-box;
    }
    .tuijian{
        width: 96%;
        height: 64px;
        margin:22px auto;
        margin-top:-22px;
        border-radius: 14px;
        background-color: silver;
        box-shadow: 0px 3px 10px #888888;
        overflow: hidden;
    
    }
    .tuijian a{
        text-decoration: none;
        color: rgb(12, 1, 1);
    }
    .tuijian ul{
        display:flex;
        height: 100%;
    }
    .tuijian ul li{
        list-style: none;
        width:20%;
        height: 100%;
        box-sizing: border-box;
        background-color:#fff; 
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex-wrap: wrap;
    }
    .tuijian ul li span{
        font-size:.75rem;
        flex: 100%;
    }
    .tuijian ul li div{
        margin:0 auto;
        width: 40px;
        height:40px;
        background-color: rosybrown;
        border-radius: 100%;
    }
    .tuijian ul li:nth-child(1) div{
        background: url(../img/精灵图1.png) no-repeat;
        background-size: 40px auto;
    }
    .tuijian ul li:nth-child(2) div{
        background: url(../img/精灵图1.png) no-repeat;
        background-size: 40px auto;
        background-position: 0% 25%;
    }
    .tuijian ul li:nth-child(3) div{
        background: url(../img/精灵图1.png) no-repeat;
        background-size: 40px auto;
        background-position: 0% 50%;
    }

    .tuijian ul li:nth-child(4) div{
        background: url(../img/精灵图1.png) no-repeat;
        background-size: 40px auto;
        background-position: 0% 75%;
    }

    .tuijian ul li:nth-child(5) div{
        background: url(../img/精灵图1.png) no-repeat;
        background-size: 40px auto;
        background-position: 0% 100%;
    }
    li{
        list-style-type: none;
    }
    </style>
</head>
<body>
    <div class="dingbu">
        <div class="sosuo">
            <ul class="so">
                <li>
                    <i class="iconfont icon-sousuo"></i>
                    <input type="text" placeholder="搜索：目的地/酒店/景点/航班号"></li>
                <li>
                <i class="iconfont icon-denglu" style="color: burlywood;">
                </i>
                <li><span>登录</span>
                </li>
            </ul>
        </div>
       </div>
       <div class="tuijian">
        <ul>
            <li><a href=""><div></div><span>攻略.景点</span></a></li>
            <li><a href=""><div></div><span>门票.活动</span></a></li>
            <li><a href=""><div></div><span>美食林</span></a></li>
            <li><a href=""><div></div><span>周边游</span></a></li>
            <li><a href=""><div></div><span>一日游</span></a></li>
        </ul>
    </div>
    <!--导航条-->
    <div class="nav">
        <div class="hang a">
            <div class="lie"><a href="javascript:;"><span>酒店</span></a></div>
            <div class="lie"><a href="javascript:;"><span>民宿'客栈</span></a></div>
            <div class="lie"><a href="javascript:;"><span>特价'爆款</span></a></div>
        </div>
        <div class="hang b">
            <div class="lie"><a href="javascript:;"><span>机票</span></a></div>
            <div class="lie"><a href="javascript:;"><span>火车票</span></a></div>
            <div class="lie"><a href="javascript:;"><span>汽车'船票</span></a></div>
            <div class="lie"><a href="javascript:;"><span>专车'租车</span></a></div>
        </div>
        <div class="hang c">
            <div class="lie"><a href="javascript:;"><span>旅游</span></a></div>
            <div class="lie"><a href="javascript:;"><span>私家团</span></a></div>
            <div class="lie"><a href="javascript:;"><span>邮轮游</span></a></div>
            <div class="lie"><a href="javascript:;"><span>定制游</span></a></div>
        </div>
    </div>
    <div class="nav2">
        <li><a href="javascript:;">
                <span class="subnav-icon"></span>
                <span>自由行</span></a></li>
        <li><a href="javascript:;">
                <span class="subnav-icon"></span>
                <span>wifi电话卡</span></a></li>
        <li><a href="javascript:;">
                <span class="subnav-icon"></span>
                <span>保险'签证</span></a></li>
        <li><a href="javascript:;">
                <span class="subnav-icon"></span>
                <span>换钞'购物</span></a></li>
        <li><a href="javascript:;">
                <span class="subnav-icon"></span>
                <span>向导'包车</span></a></li>
        <li><a href="javascript:;">
                <span class="subnav-icon"></span>
                <span>特价机票</span></a></li>
        <li><a href="javascript:;">
                <span class="subnav-icon"></span>
                <span>礼品卡</span></a></li>
        <li><a href="javascript:;">
                <span class="subnav-icon"></span>
                <span>申卡'借钱</span></a></li>
        <li><a href="javascript:;">
                <span class="subnav-icon"></span>
                <span>社区</span></a></li>
        <li><a href="javascript:;">
                <span class="subnav-icon"></span>
                <span>更多</span></a></li>
    </div>
    <ul class="dibuer">
        <li><div class="iconfont icon-dianhua1" style="color: brown;"></div>
        <span>电话预定</span></li>
        <li><div class="iconfont icon-xiazai" style="color: brown;"></div>
        <span>下载客户端</span></li>
        <li><div class="iconfont icon-wodedangxuan" style="color: brown;"></div>
        <span>我的</span></li>
    </ul>
    <div class="wei">
        <ul>
            <li><a href="">网站地图</a></li>
            <li><a href=""> Language</a></li>
            <li><a href="">电脑版</a></li>
        </ul>
        <ul>
            <li>2021携程旅行</li>
            <li>沪ICP备0808223580号</li>
        </ul>
    </div>
</body>
</html>